﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>监控警告</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
</head>

<body>
  <div class="''">
    <div class="headTitle">
      告警信息
    </div>
    <form action="" class="layui-form">
      <div class="layui-row">
        <div class="layui-col-md3">
          <div class="layui-form-item">
            <label class="layui-form-label">所属管理区</label>
            <div class="layui-input-block">
              <select name="city" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择1</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
          <div class="layui-form-item">
            <label class="layui-form-label">所属地块</label>
            <div class="layui-input-block">
              <select name="city" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择1</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
        </div>
        <div class="layui-col-md1">&nbsp;</div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md3">
          <div class="layui-form-item">
            <label class="layui-form-label">设备号</label>
            <div class="layui-input-block">
              <select name="city" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择1</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
          <div class="layui-form-item">
            <label class="layui-form-label">监控种类</label>
            <div class="layui-input-block">
              <select name="city" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择1</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
          <div style="float: right">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button class="layui-btn layui-btn-primary">重置</button>

          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
      </div>
    </form>
    <table id="demoTable" lay-filter="test"></table>
  </div>
  <script src="../lib/layui/layui.js"></script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <script>
    layui.use(['table', 'jquery'], function () {
      var table = layui.table;
      var $ = jQuery = layui.$;
      //第一个实例
      table.render({
        elem: '#demoTable',
        //					height: 315
        //  ,url: '/demo/table/user/' //数据接口
        //						,
        page: true //开启分页
          ,
        cols: [
          [ //表头
            {
              field: 'id',
              title: '序号',
              width: '10%',
              align: 'center',
              fixed: 'left'
            }, {
              field: 'username',
              title: '地块名称',
              align: 'center',
              width: '20%'
            }, {
              field: 'sex',
              title: '设备号',
              align: 'center',
              width: '15%',
            }, {
              field: 'city',
              title: '监控种类',
              align: 'center',
              width: '10%'
            }, {
              field: 'sign',
              title: '告警数值',
              align: 'center',
              width: '10%'
            }, {
              field: 'sign',
              title: '告警时间',
              align: 'center',
              width: '10%'
          },{
              field: 'sign',
              title: '告警信心',
              align: 'center',
              width: '10%'
          },{
              field: 'experience',
              title: '操作',
              width: '15%',
              align: 'center',
              toolbar: '#barDemo'
            }
          ]
        ],
        data: [{ //表格数据
          "id": "10001",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "116",
          "ip": "192.168.0.8",
          "logins": "108",
          "joinTime": "2016-10-14"
        }, {
          "id": "10002",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "12",
          "ip": "192.168.0.8",
          "logins": "106",
          "joinTime": "2016-10-14",
          "LAY_CHECKED": true
        }, {
          "id": "10003",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "65",
          "ip": "192.168.0.8",
          "logins": "106",
          "joinTime": "2016-10-14"
        }, {
          "id": "10004",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "666",
          "ip": "192.168.0.8",
          "logins": "106",
          "joinTime": "2016-10-14"
        }, {
          "id": "10005",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "86",
          "ip": "192.168.0.8",
          "logins": "106",
          "joinTime": "2016-10-14"
        }, {
          "id": "10006",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "12",
          "ip": "192.168.0.8",
          "logins": "106",
          "joinTime": "2016-10-14"
        }, {
          "id": "10007",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "16",
          "ip": "192.168.0.8",
          "logins": "106",
          "joinTime": "2016-10-14"
        }, {
          "id": "10008",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "106",
          "ip": "192.168.0.8",
          "logins": "106",
          "joinTime": "2016-10-14"
        }]
      });
      table.on('tool(test)', function (obj) { //表格操作回调
        var layEvent = obj.event
        if (layEvent === 'del') {
          $(this).closest('tr').remove();
        } else if (layEvent === 'edit') {
          console.log(obj)
        } else if (layEvent === 'detail') {
          console.log(obj)
        }
      })
    });
    layui.use('form', function () {
      var form = layui.form;
      //监听查询
      form.on('submit(formDemo)', function (data) {
        layer.msg(JSON.stringify(data.field));
        return false;
      });
    });
  </script>
</body>

</html>